<template>
  <div class="friend-circle-log">
    <el-table
      class="box-table"
      :data="tableData[currentPage-1]"
      border
      stripe
      style="width: 100%"
      height="60px"
    >
      <el-table-column
        label="任务类型"
        prop="MsgType"
        :filters="msgTypes"
        :filter-method="filterMsgType"
      ></el-table-column>
      <el-table-column label="任务时间">
        <template slot-scope="scope">
          <span v-text="$options.filters.timeFilter(scope.row.TaskId)"></span>
        </template>
      </el-table-column>
      <el-table-column
        label="任务结果"
        prop="result"
        :formatter="resultFormatter"
        :filters="results"
        :filter-method="filterResult"
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[50, 100, 150, 200]"
      :page-size="pageSize"
      :pager-count="7"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPage"
    ></el-pagination>

    <!-- 定时任务日志 -->
    <el-dialog
      title="朋友圈定时任务日志"
      class="log-dialog"
      :before-close="handleCloseCircleDilog"
      :visible.sync="taskTimeDialogCircle"
    >
      <task-time-info></task-time-info>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TaskTimeInfo from './TaskTimeInfo.vue'

export default {
  name: 'FriendCircleLog',
  data() {
    return {
      dialogTableVisible: false,
      msgTypes: [
        { text: '点赞', value: 'CircleLikeTask' },
        { text: '评论', value: 'CircleCommentReplyTask' },
        { text: '删除评论', value: 'CircleCommentDeleteTask' },
        { text: '删除朋友圈', value: 'DeleteSNSNewsTask' },
        { text: '发朋友圈', value: 'PostSNSNewsTask' },
      ],
      results: [
        { text: '成功', value: 1 },
        { text: '失败', value: 2 },
        { text: '执行中', value: 0 },
      ],
      currentPage: 1, // 当前页
      pageSize: 50, // 每页消息数
    }
  },
  components: {
    TaskTimeInfo
  },
  computed: {
    ...mapGetters({
      currentWechats: 'currentWechats',
      taskTimeDialogCircle: 'taskTimeDialogCircle',
      friendCircleLog: 'nedb/friendCircleLog',
    }),
    // 好友总数
    totalPage() {
      return this.tableData.length
    },
    // 填充表格数据
    tableData() {
      // 分页 每页50
      let newLogs = []
      let size = this.pageSize
      for (let i = 0; i < this.friendCircleLog.length; i += size) {
        newLogs.push(this.friendCircleLog.slice(i, i + size))
      }
      return newLogs
    },
    currentWeChatId() {
      let wechatId = this.currentWechats['circleLog']
      return wechatId
    },
  },
  watch: {
    currentWeChatId() {
      this.currentPage = 1
    }
  },
  methods: {
    // 修改pageSize
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 格式化结果
    resultFormatter(row, column) {
      let resultMap = {
        0: '执行中',
        1: '成功',
        2: '失败'
      }
      return resultMap[row.result];
    },
    // 任务类型过滤器
    filterMsgType(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 任务结果过滤器
    filterResult(value, row, column) {
      return row.result === value;
    },
    // 重写关闭dialog逻辑
    handleCloseCircleDilog(done) {
      this.$store.commit('SET_TASK_TIME_DIALOG_CIRLCE', false)
      // done()
      return
    }
  },
}
</script>

<style lang="scss" scoped>
.friend-circle-log {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .friends-id {
    @include ellipsis(4);
  }
  ::v-deep .log-dialog {
    overflow: hidden;
    .el-dialog {
      height: 60%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .el-dialog__body {
        flex: 1 1 auto;
        padding: 0;
        overflow: hidden;
      }
    }
  }
}
</style>
